<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详细内容</title>
		<link rel="stylesheet" href="../css/index.css" />
		<script type="text/javascript" src="../js/Size.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js" ></script>
	</head>
	<body>
		<div class="cont">
			<div class="logo" style="display: none;"></div>
			<div class="detail_left">
				<iframe id='detail_iframe' src="../jqueryztree/content.html"></iframe>
			</div>
			<div class="detail_right">
				<div id="one">
					<p class="one_title">员工维护</p>
					<table cellspacing = "0" cellpadding = "0" border="0">
						<thead>
							<tr>
								<th>姓名</th>
								<th>性别</th>
								<th>年龄</th>
								<th>电话</th>
								<th>住址</th>
								<th>职位</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="one_tbody">
							<tr>
								<td>lb</td>
								<td>女</td>
								<td>18</td>
								<td>177</td>
								<td>河南</td>
								<td>开发</td>
								<td><button>删除</button><button>修改</button></td>
							</tr>
						</tbody>
					</table>
					<button onclick="addTab()">添加</button>
				</div>
				<div class="employee" id="two">
				    <table cellspacing = "0" cellpadding = "0" border="0" class="tab1">
				        <thead>
				            <tr>
				                <th colspan="2" align="left">员工添加</th>
				            </tr>
				        </thead>
				        <tbody>
				            <tr><td align="right">员工姓名：</td><td><input type = "text" name = "empName" class="empName"></td></tr>
				            <tr><td align="right">性别：</td><td><input type = "radio" name = "sex" checked value="男">男<input type = "radio" name = "sex" value="女">女</td></tr>
				            <tr><td align="right">年龄：</td><td><input type = "text" name = "old" class="old"></td></tr>
				            <tr><td align="right">电话：</td><td><input type = "text" name = "phoneNum" class="phoneNum"></td></tr>
				            <tr><td align="right">住址：</td><td><input type = "text" name = "address" class="address"></td></tr>
				            <tr><td align="right">职位：</td><td><input type = "text" name = "job" class="job"></td></tr>
				            <tr><td align="right"></td><td><input type="submit" id="submit"><input type="reset" id="reset"></td></tr>
				        </tbody>
				    </table>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	function addTab(){
		$("#two").css({'display':'block'});
		$("#one").css({'display':'none'});
	}
	$('#submit').click(function(){
		var str = '';
		str = "<tr><td>"+$('.empName').val()+"</td><td>"+$('input:radio:checked').val()+"</td><td>"+$('.old').val()+"</td><td>"+$('.phoneNum').val()+"</td><td>"+$('.address').val()+"</td><td>"+$('.job').val()+"</td><td><button>删除</button><button>修改</button></td></tr>"
		$("#one_tbody").append(str);
		$("#two").css({'display':'none'});
		$("#one").css({'display':'block'});
	})
	$("#reset").click(function(){
		$('.empName').val("");
		$('.old').val("");
		$('.phoneNum').val("");
		$('.address').val("");
		$('.job').val("");
		$('input:radio:first').attr('checked', 'checked');
	})
</script>
